<template>
	<view>
		<up-tabbar :value="commonStore.tabActive" :fixed="true" activeColor="#d81e06" :safeAreaInsetBottom="true">
			<up-tabbar-item :text="item.text" @click="go(item.path)" :icon="item.icon" v-for="item in tabbarList"
				:name="item.path" />
		</up-tabbar>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		useCommonStore
	} from '../../store/common';
	
	let commonStore = useCommonStore()
	const tabbarList = reactive([{
			path: '/pages/index/index',
			icon: 'home',
			text: '首页',
		},
		{
			path: '/pages/index/category',
			icon: 'grid',
			text: '分类',
		},
		{
			path: '/pages/index/message',
			icon: 'chat',
			text: '消息',
		},
		{
			path: '/pages/index/shopCart',
			icon: 'shopping-cart',
			text: '购物车',
		},
		{
			path: '/pages/index/person',
			icon: 'account',
			text: '我的',
		},
	])

	function go(name) {
		commonStore.setTabActive(name)
		uni.switchTab({
			url: name
		});
	}
</script>

<style>
</style>